<script setup>
import { onMounted, ref, onUnmounted } from "vue";
import { CaretRight, CaretBottom } from "@element-plus/icons-vue";

const isEnabled = ref(true);
//展开or收起导航
const menuexpre = ref([]); //展开的路由菜单
const showchildMenu = (node) => {
  currentNode.value = node.key;
  if (menuexpre.value.includes(node.key)) {
    menuexpre.value = menuexpre.value.filter((item) => item !== node.key);
  } else {
    menuexpre.value.push(node.key);
  }
};

const currentNode = ref(""); //选中的node

const findChildNode=(node,list)=>{
  node.forEach(item => {
    
  });
}

const menu = ref([
  {
    name: "12121",
    key: "1",
  },
  {
    name: "222",
    key: "3",
    children: [
      {
        name: "wwew",
        key: "21eeeee",
      },
    ],
  },
  {
    name: "222",
    key: "2",
    children: [
      {
        name: "2323232",
        key: "21",
      },
      {
        name: "34345",
        key: "wwww",
        children: [
          {
            name: "wwwwww",
            key: "dwdwd",
          },
        ],
      },
    ],
  },
]);

const renderitemclass = (node) => {
  let _class = "treenodeitem";
  if (node.key == currentNode.value) _class = "treenodeitem current-node";
  return _class;
};
</script>

<template>
  <ul class="tree">
    <li v-for="(item, index) in menu" :key="index">
      <div :class="renderitemclass(item)" @click="showchildMenu(item)">
        <el-icon v-if="item.children" class="eicon">
          <CaretRight v-if="!menuexpre.includes(item.key)" />
          <CaretBottom v-else />
        </el-icon>
        <span>{{ item.name }}</span>
      </div>
      <ul v-if="item.children" v-show="menuexpre.includes(item.key)">
        <li v-for="(itemc, indexc) in item.children" :key="indexc">
          <div :class="renderitemclass(itemc)" @click="showchildMenu(itemc)">
            <el-icon v-if="itemc.children" class="eicon">
              <CaretRight v-if="!menuexpre.includes(itemc.key)" />
              <CaretBottom v-else />
            </el-icon>
            <span>{{ itemc.name }}</span>
          </div>
          <ul v-if="itemc.children" v-show="menuexpre.includes(itemc.key)">
            <li v-for="(itemcc, indexcc) in itemc.children" :key="indexcc">
              <div
                :class="renderitemclass(itemcc)"
                @click="showchildMenu(itemcc)"
              >
                <el-icon v-if="itemcc.children" class="eicon">
                  <CaretRight v-if="!menuexpre.includes(itemcc.key)" />
                  <CaretBottom v-else />
                </el-icon>
                <span>{{ itemcc.name }}</span>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
.tree {
  li {
    margin-left: 20px;
  }
  .treenodeitem {
    position: relative;
    .eicon {
      position: absolute;
      top: 0;
      left: -20px;
    }
  }
  .current-node {
    background: pink;
  }
}
</style>
